<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css"/>
</head>
<body ng-app="tab">
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/tab.js"></script>
<div ng-controller="deck as d">
    <div ng-repeat="m in d.minions track by $index" ng-controller="tabController as tc">
        <ul class="nav nav-pills">
            <li>
                <a href="javascript:void(0)" ng-click="tc.setTab($index)" ng-class="{active:tc.isSet($index)}">{{m.name}}</a>
            </li>
        </ul>
        <ul ng-show="tc.isSet($index)">
            <li>
                <label>名称：{{m.name}}</label>
            </li>
            <li>
                <label>费用：{{m.cost}}</label>
            </li>
            <li>
                <label>攻击力：{{m.attack}}</label>
            </li>
            <li>
                <label>生命值：{{m.life}}</label>
            </li>
            <li>
                <label>特殊能力：{{m.ability}}</label>
            </li>
        </ul>
    </div>
</div>
</body>
</html>